<template>
    <div :style="styleColor">
        <div class="head">
            <div class="left">
                <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
                <span>收付汇档案</span>
            </div>
            <div class="right" @click="jump">
                <span>详情</span>
                <img class="imgJT" src="@/assets/images/bigViewIMG2/jiantou.png" alt="">
            </div>
        </div>
        <div id="sandianMap" ref="sandianMap" style="width:100%;height:350px" ></div>
    </div>
    
</template>

<script>
import { encrypt, decrypt } from '@/utils/AES.js'
// import { getScreenItem } from '@/utils/screenStorage.js'
import echarts from 'echarts'
// import { getEntPayment, } from '@/api/views/index.js'
import { reqFindEntPaymentTop } from '@/api/home/index.js'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data(){
        return {
            options: {},
            sandianList:[]
        }
    },
    mounted() {
       
        this.options = this.value
        this.$nextTick(() => {
            this.initChart();
        });
        
    },
    computed: {
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    created(){
        this.getList()
    },
    watch:{
        sandianList:{
            deep:true,
            handler(val){
                this.setOptions(val);
            }
        },
        $route:{
            handler(val) {
                if (val.query.reportCode == "SecondView") {
                    this.getList()
                } else {
                    return
                }


            },
            deep:true
        }
    },
    methods:{
        jump(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.$router.push({
                path: '/visual/thirdView/sandianView',
                query: { 
                    key: encrypt(JSON.stringify({
                        company:query.company,
                         text: '收付汇档案',
                          tradeCo:query.tradeCo
                    }))
                 }
            })
        },
        async getList(){
        //     const companyName = getScreenItem().company
        //    const res= await getEntPayment({
        //        entName: companyName,
        //        page:1,
        //        size:5
        //    })
            let query = JSON.parse(decrypt(this.$route.query.key))
            const res = await reqFindEntPaymentTop({tradeCo: query.tradeCo})
        //   console.log('11111',res);
            this.sandianList =res.data
            this.chart.hideLoading();
           
        },
        
        initChart() {
            this.chart = echarts.init(document.getElementById('sandianMap'), null, { renderer: 'svg' });
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.sandianList);
        },
        setOptions(sandianList){
            // console.log(sandianList);
           const max= sandianList.filter(item=>{
                return item.pfcurrAmtMax
            })
            const min = sandianList.filter(item => {
                return item.pfcurrAmtMin
            })
            const dateList=max.map(item=>{
                return item.pfcurrDate
            })
           
          
            const maxList=max.map(item=>{
                return +item.pfcurrAmtMax
            })
            const minList=min.map(item=>{
                return +item.pfcurrAmtMin
            })
            // console.log(maxList, minList);
            // 大
            var getamount = maxList; //人均发表篇数
            var getorderCount = dateList; //总被引用数

           
            // 小
            var getamount2 = minList ; //人均发表篇数
            var getorderCount2 = dateList; //总被引用数
            
            var datas = [];
            for (var i = 0; i < getamount.length; i++) {
               
                datas.push({
                   
                  
                    amount: getamount[i],
                    orderCount: getorderCount[i],
                });
            }

            var datas2 = [];
            for (var i = 0; i < getamount2.length; i++) {
                datas2.push({ 
                    
                    
                    amount: getamount2[i],
                    orderCount: getorderCount2[i],
                });
            }

            let packedDatas = packDatas(datas);
            let packedDatas2 = packDatas2(datas2);

            function packDatas(datas) {
                let packedDatas = datas.map((data) => {
                    
                   
                    let refs = data["amount"];
                    let dispathCount = data["orderCount"];
                    let avt = data["value"];
                    return [dispathCount, refs, name, avt];
                });

                return packedDatas;
            }
            function packDatas2(datas2) {
                let packedDatas2 = datas2.map((data) => {
                   
                    
                    let refs = data["amount"];
                    let dispathCount = data["orderCount"];
                    let avt = data["value"];
                    return [dispathCount, refs, name, avt];
                });

                return packedDatas2;
            }
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: sandianList.length>0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                title: {
                    
                    text: '付汇金额大小TOP5',
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize:16
                    }
                },

                backgroundColor: '',
                grid: {
                    top: 60,
                    bottom: 60,
                    left: 60,
                    right: 30,
                },
                legend: {
                    show: sandianList.length > 0,
                    data: ["付汇金额大", "付汇金额小"],
                    // type: "scroll",
                    left: "center",
                    bottom: "10",
                    itemGap: 25,
                    itemWidth: 14,
                    itemHeight: 14,
                    textStyle: {
                        fontSize: "13",
                        color: "#fff",
                    },
                    backgroundColor: '#000'
                },
                tooltip: {
                    extraCssText:
                        "padding-right:8px;padding-left:8px;line-height:30px;background:rgba(255,255,255,1);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;",
                    textStyle: {
                        fontSize: "13",
                        color: "#656565",
                    },
                    formatter: function (obj) {
                        // var value = obj.value;
                       
                        return (
                          `
                            <div style="padding-bottom: 5px;margin-bottom: 0px; text-align:start">
                                <div style="font-weight:900">${obj.seriesName}</div>
                                <div>付汇日期：${obj.name}</div>
                                <div>付汇金额：${obj.value[1]}万元</div>
                            </div>
                          `
                          
                        );
                    },
                },
                xAxis: {
                    data: getorderCount,
                    splitLine: {
                        show: false,
                    },
                    scale: true,
                    // type: "value",
                  
                    axisLabel: {
                       
                        color: "#fff",
                        textStyle: {
                            fontSize: 13,
                        },
                    },
                    axisLine: {
                        show: sandianList.length > 0,
                        lineStyle: {
                            color: "rgba(209,209,209,.25)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    
                },
                yAxis: {
                    // name: "人均发表篇数",
                    name: sandianList.length > 0?"万元":'',
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 13,
                        padding: [0, 0, 10, 30],
                    },
                    axisLabel: {
                        formatter: function (value) {
                            
                            let num = value;
                            if (num && num != "undefined" && num != "null") {
                                let numS = num;
                                numS = numS.toString();
                                numS = numS.replace(/,/gi, "");
                                return numS;
                            } else {
                                return num;
                            }
                        },
                        color: "#fff",
                        textStyle: {
                            fontSize: 13,
                        },
                    },

                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(209,209,209,.25)",
                        },
                    },
                },

                series: [
                    {
                        name: "付汇金额大",
                        symbolSize: function (data) {
                            
                            return Math.sqrt(10000) / 5;
                        },
                        itemStyle: {
                            normal: {
                                color: "#2b99ff",
                                borderColor: "#2b99ff",
                                borderWidth: 2,
                            },
                        },
                        data: packedDatas,
                        type: "scatter",
                    },
                    {
                        name: "付汇金额小",
                        symbolSize: function (data) {
                            // console.log(data)
                            return Math.sqrt(10000) / 10;
                        },
                        itemStyle: {
                            normal: {
                                color: "#52ffa3",
                                borderColor: "#52ffa3",
                                borderWidth: 2,
                            },
                        },
                        data: packedDatas2,
                        type: "scatter",
                    },
                ],
            })
        }
    }
}
</script>

<style scoped lang="scss">
.head {
    // padding: 0 5px;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .left {
        display: flex;
        align-items: center;

        .headerIMG {
            width: 40px;
            height: 40px;
        }

        span {
            color: #fff;
            margin-left: 10px;
            font-size: 15px;
        }
    }

    .right {
        cursor: pointer;
        display: flex;
        margin-right: 10px;
        align-items: center;

        span {
            color: #fff;
            font-size: 15px;
        }

        .imgJT {
            margin-left: 10px;
            width: 12px;
            height: 12px;
        }
    }
}
</style>